<template>
  <div>
        <div class="ele-table-tool ele-table-tool-default">
        <el-button @click="showAddForm=true" type="primary" icon="el-icon-plus" class="ele-btn-icon" size="small">新建</el-button>
        <el-button @click="remove()" type="danger" icon="el-icon-delete" class="ele-btn-icon" size="small">批量删除</el-button>
        <el-button @click="showCreateDataImportForm=true" type="primary" icon="el-icon-plus" class="ele-btn-icon" size="small">导入</el-button>
        <el-button @click="showDataExportForm=true" type="primary" icon="el-icon-minus" class="ele-btn-icon" size="small">导出</el-button>
      </div>

      <!-- 数据表格 -->
 <el-table
    ref="multipleTable"
    :data="data"
    tooltip-effect="dark"
    height="calc(100vh - 300px)" highlight-current-row
    style="width: 100%"
    @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="45" align="center" fixed="left"/>
          <el-table-column prop="id" label="编号" width="60" align="center" fixed="left" show-overflow-tooltip/>
          <el-table-column v-for="(v,k) in cols" :prop="v.prop" :label="v.label" :key="k" show-overflow-tooltip />
          <el-table-column label="操作" width="180px" align="center" :resizable="false"  fixed="right">
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="handleEdit(scope.$index, scope.row)">编辑</el-button>

        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
          </el-table-column>
  </el-table>
      <el-pagination
       :current-page="requestData.page.current_page" :page-size="requestData.page.per_page" :total="requestData.page.total"
        :background="true" layout="total, sizes, prev, pager, next, jumper" :page-sizes="[10,20,50,100, 200,]"
        prev-text="上一页" next-text="下一页"  
        @size-change="pageSizeChange" @current-change="pageCurrentChange" class="ele-pagination-circle"/>

    <el-dialog title="新建" :visible.sync="showAddForm" width='30%' >
      <el-form :model="form" label-width="100px">
        <template v-for="(v,k) in cols">
        <el-form-item v-if='v.isEdit' :label="v.label"  :prop="v.prop" required  :key='k'>
          <el-input v-model="form.name" autocomplete="off" v-if="v.editType == 'text'"></el-input>
          <el-select v-model="form.region" placeholder="请选择活动区域" v-else-if="v.editType == 'select'">
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
        </el-select>
    <el-input type="textarea" v-model="form.desc" v-else-if="v.editType=='textarea'"></el-input>
         <el-button bsize="mini" type="primary" v-else @click='getWorkerList'>选择</el-button>
        </el-form-item>
        </template>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showAddForm = false">取 消</el-button>
        <el-button type="primary" @click="showAddForm = false">确 定</el-button>
      </div>
    </el-dialog>

      <el-dialog
      width="40%"
      title="请选择负责人"
      :visible.sync="innerVisible"
      append-to-body>
      <template>
  <el-transfer
    filterable
    :titles="['选择负责人','已选择']"
    filter-placeholder="请选择负责人"
    v-model="value"
    :data="dataTransfer">
  </el-transfer>
</template>
    </el-dialog>


  </div>
</template>

<script>
// import AddStudent from './create';
// import CreateDataImport from './create-data-import';
// import UpdateDataImport from './update-data-import';
// import BatchBindCard from './batch-bind-card';
// import DataExport from './data-export';
export default {
  name: "DormBuilding",
  // components: {AddStudent, CreateDataImport, DataExport, UpdateDataImport, BatchBindCard},
  props:['p_id','level'],
  data() {
    const generateData = _ => {
        const data = [];
        const cities = ['上海', '北京', '广州', '深圳', '南京', '西安', '成都'];
        const pinyin = ['shanghai', 'beijing', 'guangzhou', 'shenzhen', 'nanjing', 'xian', 'chengdu'];
        cities.forEach((city, index) => {
          data.push({
            label: city,
            key: index,
            pinyin: pinyin[index]
          });
        });
        return data;
      };

    return {
        dataTransfer: [],
        value: [],
        filterMethod(query, item) {
          return item.pinyin.indexOf(query) > -1;
        },
      showAddForm: false, // 是否显示创建学生表单弹窗
      showCreateDataImportForm: false, // 是否显示创建数据导入弹窗
      showDataExportForm: false, // 是否显示数据导出弹窗
      form:{},
      data:[],
      cols:[],
      innerVisible:false,
      visible:false,
      requestData: {
        where:{},
        page:{
          current_page:1,
          per_page:10
        },
        level:1,
        id:0
      },  // 搜索条件
      queryInfo:{
        url:'/Common/getListByLevel',
        colsUrl:'/Common/getCols',
        deleteUrl:'/Common/deleteBylevel',
        getWorkerList:'/DormBuilding/getWorkerList'
      }
    }
  },
  mounted() {
    // this.query()
    // this.getColsAndQuery()
  },
  // watch:{
  //   innerVisible(value){
  //     if(value)
  //     {
  //       this.getWorkerList()
  //     }
  //   }
  // },
  methods: {
    handleEdit(){
    },
    async getWorkerList(){
        let res = await this.$http.post(this.queryInfo.getWorkerList)
        this.dataTransfer = res.data
        this.innerVisible=true
        // this.dataTransfer = res.data
    },
    async handleDelete(index,row){
      this.requestData.id = row.id
      try{
        await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        let res = await this.$http.post(this.queryInfo.deleteUrl,this.requestData)

        this.getColsAndQuery()
        this.$message({
          type: 'success',
          message: res.msg
        });

      }catch(e){
          this.$message({
            type: 'info',
            message: e == 'cancel'?e:e.message
          });  
         
      }
    },
    handleSelectionChange(){},
    pageSizeChange(value){
      this.requestData.page.per_page = value
      this.query()
    },
    pageCurrentChange(value){
      this.requestData.page.current_page = value
      this.query()
    },
    async getColsAndQuery()
    {
      this.requestData.where.p_id = this.p_id
      this.requestData.level = this.level
      this.loading = true;
      try {
          let cols = await this.$http.post(this.queryInfo.colsUrl, this.requestData)
          this.cols = cols.data
          this.query()
      } catch (e) {
        console.log(e.message); // 
      }
    },
    async query(){
        let res = await this.$http.post(this.queryInfo.url, this.requestData)
        this.data = res.data.data
        delete res.data.data
        this.requestData.page = {...res.data}
        this.$nextTick(() => {
              this.$refs.multipleTable.doLayout()
        })
    },
    /**
     * 显示编辑
     */
    edit(row) {
    },
    /**
     * 保存编辑
     */
    save() {
    },
    /**
     * 刪除(批量刪除)
     */
    remove(row) {
     
    },
  }                                                       }
</script>

<style scoped>
.ele-block >>> .el-upload, .ele-block >>> .el-upload-dragger {
  width: 100%;
}
</style>